{% extends "kitchen/dashboard_base.html" %}

{% load compile_static %}
{% load static %}

{% block cssincludes %}
<link href="{% static 'map.scss'|compile %}" rel="stylesheet" type="text/css" />
{% endblock %}

{% block content %}

<h3 class="table-map-title mb-3"></h3>

<div class="table-map-controls">
    <button type="button" class="switch-mode-btn btn btn-secondary"></button>
    <a href="{% url "party_create" %}" class="btn btn-primary">New Party</a>
    <button type="button" class="new-table-btn btn btn-primary">New Table</button>
</div>

<div class="table-map-div-wrapper">
<svg class="table-map-container{% if edit %} edit-map{% endif %}" style="width: 100%;" viewBox="0 0 1500 900">
    <g class="table-group" style="" ></g>
    <g class="table-label-group" style="font-size: 37;"></g>
</svg>
</div>

<div class="modal fade" id="new-table-modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">New Table</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="slug-field">Slug</label>
                        <input type="text" name="name" class="form-control" id="slug-field" placeholder="Give a short name for your table" required max="10" />
                    </div>
                    <div class="form-group">
                        <label for="party-size-field">Number of seats</label>
                        <input type="number" name="size" class="form-control" id="party-size-field" placeholder="Number of chairs at table" value="4" required />
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="table-save-btn btn btn-primary" data-dismiss="modal">Save</button>
                <button class="table-cancel-btn btn btn-secondary" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="new-party-modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Seating <span id="new-party-table-slug"></span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="currently-seated" style="display: none; text-align: center;">
                    <strong>Currently Seated: <span id="currently-seated-name"></span></strong>
                    <div>
                        <button type="button" id="currently-seated-remove" class="btn btn-danger">Unseat</button>
                    </div>
                    <hr />
                </div>

                <form id="existing-party-form">
                    <div class="form-group">
                        <label for="existing-party">Existing Party</label>
                        <select name="party" class="form-control" id="existing-party-list">
                            <option value="0">Create new party</option>
                        </select>
                    </div>
                </form>

                <hr />
                <div><strong>(OR)</strong></div>
                <hr />

                <form id="create-party-form">
                    <div class="form-group">
                        <label for="name-field">Name</label>
                        <input type="text" name="name" class="form-control" id="name-field" placeholder="Name this party" required max="50" />
                    </div>
                    <div class="form-group">
                        <label for="size-field">Size</label>
                        <input type="number" name="size" class="form-control" id="size-field" placeholder="Size of party" required />
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="party-save-btn btn btn-primary">Save</button>
                <button class="party-cancel-btn btn btn-secondary" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block templates %}
{% endblock %}

{% block scripts %}

<script src="{% static 'js/TableMapManager.js' %}"></script>

<script>

const apiTablesUrl = "{% url "table-list" %}";
const apiPartiesUrl = "{% url "party-list" %}";
const startEditMode = {% if edit %}true{% else %}false{% endif %};

const seatUrl = "{% url "map" %}";
const editUrl = "{% url "map_edit" %}";

const mapManager = new TableMapManager(".table-map-container", apiTablesUrl, apiPartiesUrl, seatUrl, editUrl);

$(function() {
    jqueryAjaxSetup();

    mapManager.loadAllTables();

    if (startEditMode)
        mapManager.enterEditMode();
    else
        mapManager.enterSeatMode();

    mapManager.initListeners();
});

</script>

{% endblock %}
